﻿<style type="text/css">
.image_content{width:100%;overflow: hidden;position: relative;}
.image_content_left{height: 400px;width: 40%;border: 1px solid #ddd;background-color: #2e2d2e;}
.image_content_rightt{    height: 250px;
    width: 25%;
    bottom: 0;
    left: 40%;
    position: absolute;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
.image_content_right_top{height: 150px;
    width: 25%;
    left: 40%; top: 0;
    position: absolute;}
.image_footer{ width:100%; height:200px;line-height: 25px;}
</style>
<div class="xueyuanduan_renwulist_top" ng-controller="PhotoImg">
    <div class="member_main">
   
        <h5><span>图像采集</span></h5>
        <div style="padding: 15px 35px; position:relative;">
          <!--  <loading isloading="Loading" ng-if="Loading"></loading>  -->
            <div class="image_content">
                <div class="image_content_left" id="photoframe">
                    <video id="video" width="440" height="100%" >
                    </video>
                </div>
                <canvas id="canvas" width="440" height="320" style="display: none;"></canvas>
                <div class="image_content_right_top">
                    <button class="btn queding" ng-click="photoImg()" style="width: 100%;bottom: 0;right: 0; margin: 0;position: absolute;">拍照</button>
                </div>
                <div class="image_content_rightt" >

                </div>
            </div>
            <div class="image_footer">
                使用说明：<br>
                1、查看上方摄像头，确保摄像头显示位置为正面。<br>
                2、确保摄像位置正确后点击拍照按钮。<br>
                3、点击拍照后，系统自动验证您的照片是否合格。<br>
                4、匹配成功后可以进行学习和考试。<br>
                5、若总是出现不能正常识别，请调整摄像头位置，确保在光线充足 情况下拍照。<br>
            </div>
        </div>

    </div>
</div>

